<template>
  <a-modal v-model:visible="visible" width="60%" title="详情" :footer="null">
    <a-descriptions title="" class="px-6 py-4">
      <a-descriptions-item label="时间">{{ warn.createDate }}</a-descriptions-item>
      <a-descriptions-item label="data1">{{ warn.data1 }}</a-descriptions-item>
      <a-descriptions-item label="data2">{{ warn.data2 }}</a-descriptions-item>
      <a-descriptions-item label="温度">{{ warn.temp }}</a-descriptions-item>
      <a-descriptions-item label="告警等级">{{ warn.warnLevel }}</a-descriptions-item>
      <a-descriptions-item label="告警内容">{{ warn.warnStr }}</a-descriptions-item>
    </a-descriptions>

    <div class="flex justify-end px-6 pb-4">
      <a-button @click="visible = false">取消</a-button>
    </div>
  </a-modal>
</template>
    <script lang="ts">
import { defineComponent, ref } from 'vue';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';

export default defineComponent({
  components: { Descriptions, DescriptionsItem },
  setup() {
    const visible = ref<boolean>(false);
    const warn = ref<any>({});

    const open = (row) => {
      warn.value = {
        createDate: row.createDate.replace('T', ' '),
        data1: row.data1,
        data2: row.data2,
        temp: row.temp,
        warnLevel: row.warnLevel,
        warnStr: row.warnStr,
      };
      visible.value = true;
    };

    return {
      visible,
      open,
      warn,
    };
  },
});
</script>
    
    